<!DOCTYPE html>
<html xmlns="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<base th:href="@{/}"/>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/css/Managerstyle.css}"/>
<link rel="stylesheet" th:href="@{/css/font-awesome.min.css}" />
<script th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<title>Insert title here</title>
<style>
	#search{
		float:left;
		height:33px;
		width:33px;
		font-size: 17px;
		line-height:30px;
		text-align:center;
		cursor: pointer;
		border: 1px solid #4cae4c;
		margin-left: 10px;
		margin-top: 1px;
		border-radius: 4px;
		color: white;
		background-color: #5cb85c;
	}
	#search:hover {
		border: 1px solid #398439;
		background-color: #449d44;
	}
</style>
</head>
<body>
	<div class="contain">
		<h3>课程管理</h3>
		<form style="float: left; width: 300px;" th:action="@{/mc/getAllCourse}">
			<input type="text" name=keyword id="keyword" class="form-control" style="float:left; margin-bottom: 5px; width: 200px;" placeholder="请输入关键字查询" />
			<button type="submit" style="border: none; background: none; outline: none;"><i class="fa fa-search" id="search"></i></button>
		</form>
		<a href="mc/downloadCourseMould" style="float:right;">下载课程上传模板</a>
		<table class="table table-hover">
			<tr>
				<td>课程代号</td>
				<td>课程名称</td>
				<td>所属学院</td>
				<td>课程类型</td>
				<td>学分</td>
				<td>考试类型</td>
				<td>学时</td>
				<td>详细学时</td>
				<td>描述</td>
				<td>操作</td>
			</tr>
			<tbody id="display" style="border-top:1px solid #ddd;">
				<tr th:each="course:${courselist}" th:id="|tr${course.cid}|">
					<td th:text="${course.cid}"></td>
					<td th:text="${course.cname}"></td>
					<td th:text="${course.acadamy.acdmname}"></td>
					<td th:text="${course.ctype}"></td>
					<td th:text="${course.credit}"></td>
					<td th:text="${course.cmethod}"></td>
					<td th:text="${course.ctime}"></td>
					<td th:text="${course.ctimeDetail}"></td>
					<td th:text="${course.description}"></td>
					<td>
						<a th:href="|mc/to_modifyCourse/${course.cid}|">修改</a>
						<a th:href="|javascript:deleteCourse('${course.cid}')|">删除</a>
					</td>
				</tr>
			</tbody>
			
		</table>
		<!-- Button trigger modal -->
		<button type="button" style="float:left;" class="btn btn-success" data-toggle="modal" data-target="#addCourse">
		  添加新课程
		</button>
		<form enctype="multipart/form-data" method="post" action="mc/uploadCourse">
			<input type="submit" value="上传" class="btn btn-success" style="float:right" />
			<label for="file" style="float:right;display: inline-block;text-align: center; line-height:32px ;height: 32px;width:80px; ">＋选择文件</label>
			<input type="file" id="file" name="file" style="display: none" /> 
		</form>
		<div class="text-center">
			<nav>
				<ul class="pagination">
					<li><a th:href="@{/mc/getAllCourse/(pageNo=1,keyword=${keyword})}">首页</a></li>
					<li><a th:href="@{/mc/getAllCourse/(pageNo=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1,keyword=${keyword})}">上一页</a></li>
					<li th:each="page:${pageInfo.navigatepageNums}">
						<a th:class="${pageInfo.pageNum}==${page}?'active'"
						   th:href="@{/mc/getAllCourse/(pageNo=${page},keyword=${keyword})}">[[${page}]]</a>
					</li>
					<li><a th:href="@{/mc/getAllCourse/(pageNo=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages},keyword=${keyword})}">下一页</a></li>
					<li><a th:href="@{/mc/getAllCourse/(pageNo=${pageInfo.pages},keyword=${keyword})}">尾页</a></li>
				</ul>
			</nav>
		</div>
		<!-- addCourse -->
		<div class="modal fade" id="addCourse" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">添加新课程</h4>
		      </div>
		      <form action="mc/addCourse" method="post">
		      <input name="cid" value="default" type="hidden">
		      <div class="modal-body">
					<dl class="dl-horizontal">
						<dt>课程名称：</dt>
						<dd><input type="text" required="required" name="cname" placeholder="请输入课程名称" class="form-control" style="width: 250px;"></dd>
						<br>
						<dt>开课学院：</dt>
						<dd>
						<select name="acdmid" >
							<option th:each="acadamy:${acadamylist}" th:value="${acadamy.acdmid}" th:text="|${acadamy.acdmname}|"></option>
						</select>
						</dd>
						<br>
						<dt>课程类型：</dt>
						<dd>
						<select name="ctype" >
							<option value="必修">必修</option>
							<option value="选修 ">选修</option>
						</select>
						</dd>
						<br>
						<dt>学分：</dt>
						<dd><input name="credit" type="number" required="required" min="1" max="20" step="0.5" class="form-control" style="width: 70px;"></dd>
						<br>
						<dt>考查方式：</dt>
						<dd>
						<select name="cmethod" >
							<option value="考试">考试</option>
							<option value="考查 ">考查</option>
						</select>
						</dd>
						<br>
						<dt>学时：</dt>
						<dd><input name="ctime" type="number" required="required" min="10" max="100"  class="form-control" style="width: 70px;"></dd>
						<br>
						<dt>详细学时：</dt>
						<dd><input type="text" name="ctimeDetail" class="form-control" style="width: 250px;"></dd>
						<br>
						<dt>描述：</dt>
						<dd><input type="text" name="description" class="form-control" style="width: 250px;"></dd>
						<br>
					</dl>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <input type="submit" class="btn btn-primary" value="添 加">
		      </div>
		      </form>
		    </div>
		  </div>
		</div>
	
	</div>
	
	<script>
		function deleteCourse(cid){
			$.ajax({
				url: "mc/deleteCourseByCid",
				type: "GET",
				data: {cid:cid},
				success: function(){
					$("#tr"+cid).remove();					
				},
				error: function(){}
			});
			
		};
		
			
	</script>
</body>
</html>